<template>
  <section class="banner">
    <swiper :modules="modules" :slides-per-view="1" :autoplay="true" :loop="true">
      <swiper-slide class="slide">
        <img src="../assets/imgs/ban1.png" alt="" />
      </swiper-slide>
      <swiper-slide class="slide">
        <img src="../assets/imgs/ban2.png" alt="" />
      </swiper-slide>
      <swiper-slide class="slide">
        <img src="../assets/imgs/ban3.png" alt="" />
      </swiper-slide>
    </swiper>

    <div class="triangle">
      <div class="bg"></div>
      <img src="../assets/imgs/ban4.png" alt="" />
      <h2 class="text-center text-md lg:text-3xl">人人云矿机</h2>
    </div>
  </section>
</template>

<script>
import { Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  setup() {
    return {
      modules: [Autoplay]
    }
  }
}
</script>

<style lang="scss" scoped>
.slide {
  width: 100%;
  height: auto;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.banner {
  position: relative;
  z-index: 1;

  .triangle {
    position: absolute;
    width: 100%;
    height: 10vw;
    left: 0;
    bottom: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .bg {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: #fff;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }

    img {
      width: 50%;
      height: auto;
      object-fit: cover;
      position: relative;
      z-index: 9;
    }
  }
}
</style>